<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>情侣APP - 时空胶囊</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="container">
        <!-- 时空胶囊界面 -->
        <div class="screen">
            <div class="screen-title">时空胶囊</div>
            <div class="capsule-screen">
                <div class="capsule-list">
                    <div class="capsule-item">
                        <div class="capsule-header">
                            <div class="capsule-title">一周年惊喜</div>
                            <div class="capsule-date">2023/12/20</div>
                        </div>
                        <div class="capsule-locked">
                            <i class="fas fa-lock"></i>
                            <p>这个胶囊将在197天后解锁</p>
                        </div>
                        <div class="capsule-countdown">
                            还有197天解锁
                        </div>
                        <div class="capsule-tags">
                            <span class="capsule-tag">惊喜</span>
                            <span class="capsule-tag">纪念日</span>
                            <span class="capsule-tag">爱意</span>
                        </div>
                    </div>
                    
                    <div class="capsule-item">
                        <div class="capsule-header">
                            <div class="capsule-title">生日祝福</div>
                            <div class="capsule-date">2023/08/15</div>
                        </div>
                        <div class="capsule-locked">
                            <i class="fas fa-lock"></i>
                            <p>这个胶囊将在70天后解锁</p>
                        </div>
                        <div class="capsule-countdown">
                            还有70天解锁
                        </div>
                        <div class="capsule-tags">
                            <span class="capsule-tag">生日</span>
                            <span class="capsule-tag">祝福</span>
                            <span class="capsule-tag">期待</span>
                        </div>
                    </div>
                    
                    <div class="capsule-item">
                        <div class="capsule-header">
                            <div class="capsule-title">100天纪念</div>
                            <div class="capsule-date">2023/02/10</div>
                        </div>
                        <div class="capsule-content">
                            亲爱的，今天是我们在一起的第100天，这100天是我生命中最美好的时光。希望未来的每一天我们都能一起度过。爱你！
                        </div>
                        <div class="capsule-images">
                            <div class="capsule-image" style="background-image: url('love.png');"></div>
                            <div class="capsule-image" style="background-image: url('love.png');"></div>
                        </div>
                        <div class="capsule-countdown">
                            已解锁
                        </div>
                        <div class="capsule-tags">
                            <span class="capsule-tag">纪念日</span>
                            <span class="capsule-tag">甜蜜</span>
                            <span class="capsule-tag">回忆</span>
                        </div>
                    </div>
                </div>
                
                <div class="add-activity" id="addCapsuleBtn">
                    <i class="fas fa-plus"></i>
                </div>
                
                <div class="bottom-nav">
                    <div class="nav-item" data-page="dashboard.html">
                        <i class="fas fa-home"></i>
                        <span>主页</span>
                    </div>
                    <div class="nav-item" data-page="calendar.html">
                        <i class="fas fa-calendar"></i>
                        <span>日历</span>
                    </div>
                    <div class="nav-item active" data-page="capsule.html">
                        <i class="fas fa-clock"></i>
                        <span>时空胶囊</span>
                    </div>
                    <div class="nav-item" data-page="settings.html">
                        <i class="fas fa-cog"></i>
                        <span>设置</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <script src="script.js"></script>
    <script>
        // 页面跳转逻辑
        document.querySelectorAll('.nav-item').forEach(item => {
            item.addEventListener('click', function() {
                const page = this.getAttribute('data-page');
                if (page) {
                    window.location.href = page;
                }
            });
        });
        
        // 添加胶囊按钮点击事件
        document.getElementById('addCapsuleBtn').addEventListener('click', function() {
            alert('创建新的时空胶囊');
        });
        
        // 初始化时空胶囊倒计时
        function initCapsuleCountdown() {
            // 获取所有倒计时元素
            const countdowns = document.querySelectorAll('.capsule-countdown');
            
            // 更新倒计时
            countdowns.forEach(countdown => {
                if (countdown.textContent.includes('天解锁')) {
                    // 提取天数
                    const days = parseInt(countdown.textContent.match(/\d+/)[0]);
                    
                    // 如果天数大于0，则每天减少1天
                    if (days > 0) {
                        // 模拟倒计时，实际应用中应该使用服务器时间
                        setInterval(() => {
                            const currentDays = parseInt(countdown.textContent.match(/\d+/)[0]);
                            if (currentDays > 0) {
                                countdown.textContent = `还有${currentDays - 1}天解锁`;
                            } else {
                                countdown.textContent = '已解锁';
                                countdown.style.color = '#4caf50';
                            }
                        }, 86400000); // 24小时 = 86400000毫秒
                    }
                }
            });
        }
        
        // 页面加载时初始化倒计时
        document.addEventListener('DOMContentLoaded', function() {
            initCapsuleCountdown();
        });
    </script>
</body>
</html> 